import React from 'react'
import { Carousel, Card, Icon ,Button } from 'antd'
import { Link } from 'react-router-dom'
import { findBanner,topList } from "../../api/index"
import "./recmd.scss"
const { Meta } = Card;


export default class Recmd extends React.Component {
 
  constructor() {
    super()
    this.state = {
      bannerList:[],
      topList:[]
    }
  }

  componentWillMount () {
    findBanner().then(res=>{
      console.log(res)
      this.setState({
        bannerList:res.banners
      })
    })

    topList({limit:9,order:'hot'}).then(res=>{
      console.log(res)
      this.setState({
        topList:res.playlists
      })
    })
  }

  render() {
    
    const renderTemp = function(item){
      return <div className="bot_lay">
        <img alt="example" src={ item.coverImgUrl } />
        <div>
          <Icon type="customer-service" />
          <span> { item.playCount } </span>
          <Icon type="play-circle" style={ { float:'right' } } />
        </div>
      </div>
    }
    return <div id="find_recmd">
      <Carousel effect="fade">
        {
          this.state.bannerList.map(item=><div key={ item.encodeId }>
            <img src={ item.imageUrl } alt=""/>
          </div>)
        }
      </Carousel>
      <div className="main">
        <div className="main_l">
          <div className="recmd_tit">
            <h3><i></i>热门推荐</h3>
            <ul>
              <li><Link to="/find/musicList?cat=华语">华语</Link></li>
              <li><Link to="/find/musicList?cat=流行">流行</Link></li>
              <li><Link to="/find/musicList?cat=摇滚">摇滚</Link></li>
              <li><Link to="/find/musicList?cat=民谣">民谣</Link></li>
              <li><Link to="/find/musicList?cat=电子">电子</Link></li>
            </ul>
            <div className="more">
              <Link to="/find/more">更多</Link>
              <i></i>
            </div>
          </div>
          <div className="recmd_list">
            {
              this.state.topList.map(item=>{
                return <Card
                  key={ item.id }
                  hoverable
                  style={{ width: 140 }}
                  cover={renderTemp(item)}
                >
                  
                  <Meta
                    title={ item.name }
                  />
                </Card>
              })
            }
            
          </div>
        </div>
        <div className="main_r">
            <div className="personal">
              <div className="top">
                <img src="" alt=""/>
                <div>
                  <p>xdesa</p>
                  <p className="level">LV.2</p>
                  <Button type="primary">签到</Button>
                </div>
              </div>
              <ul className="amount">
                <li> 
                  <Link to="/find/user">
                    <strong>1</strong>
                    <span>动态</span>
                  </Link> 
                </li>
                <li> 
                  <Link to="/find/follow">
                    <strong>1</strong>
                    <span>关注</span>
                  </Link> 
                </li>
                <li> 
                  <Link to="/find/fans">
                    <strong>1</strong>
                    <span>粉丝</span>
                  </Link> 
                </li>
              </ul>
            </div>
        </div>
      </div>
    </div>
  }
}
